<template>
    <div class="headers">
        <div class="search-box" @click="minibarRightButtonClick">
            <div class="search-input">
                <text class="search-text">搜索</text>
            </div>
            <text class="search-icon" :style="{fontFamily: 'wxcIconFont'}">{{'\ue627'}}</text>
        </div>
        <slider class="slider" interval="3000" auto-play="true">
            <div class="frame" v-for="img in imageList">
                <image class="image" resize="cover" :src="img.src"></image>
            </div>
        </slider>
        <top-tab-bar ref="top-tab-bar"
                     :tab-titles="tabTitles"
                     :tab-styles="tabStyles"
                     title-type="icon"
                     :tab-page-height="100"
                     @wxcTabBarCurrentTabSelected="wxcTabPageCurrentTabSelected">
        </top-tab-bar>
        <r-l-list ref="dylist" listItemName="EventItem" :listData="dataList" :listHeight="listHeight"
                  :forLoadMore="onLoadMore" :forRefresh="onRefresh" :itemClick="itemClick">
        </r-l-list>
    </div>
</template>

<script>
  const modal = weex.requireModule('modal')
  import RLList from './widget/RLList.vue'
  import TopTabBar from './widget/TopTabBar.vue'
  import { getListHeight, navigatorbBarHeight } from '../config/Config'
  import { Utils } from 'weex-ui'
  import Config from '../config/HomeTabConfig'
  import NavigationBar from './widget/NavigationBar.vue'

  export default {
    components: {RLList, TopTabBar, NavigationBar},
    data () {
      return {
        currentPage: 1,
        listHeight: 0,
        tabTitles: Config.tabTitles,
        tabStyles: Config.tabStyles,
        type: 'course',
      }
    },
    created: function () {
      this.listHeight = getListHeight(Utils.env.getScreenHeight() - navigatorbBarHeight - 400, Utils)
      this.$store.dispatch('getPictures', {
        column: '手机端首页轮播',
        limit: 8,
      })
      this.onRefresh()
      // this.loadData(1)
    },
    activated: function () {
      //keep alive
      if (WXEnvironment.platform === 'Web') {
        this.onRefresh()
      }
    },
    computed: {
      dataList () {
        return this.$store.state.event.received_events_data_list
      },
      imageList () {
        return this.$store.state.event.home_slider_list
      },
    },
    methods: {
      loadData (type) {
        this.$store.dispatch('getEventReceived', {
          type: this.type,
          page: this.currentPage, callback: (res) => {
            if (type === 1) {
              if (this.$refs.dylist) {
                this.$refs.dylist.stopRefresh()
              }
            } else if (type === 2) {
              if (this.$refs.dylist) {
                this.$refs.dylist.stopLoadMore()
              }
            }
            if (this.$refs.dylist) {
              if (!res.data.data || res.data.data.length < this.getPageSize()) {
                this.$refs.dylist.setNotNeedLoadMore()
              } else {
                this.$refs.dylist.setNeedLoadMore()
              }
            }
          },
        })
      },
      onLoadMore () {
        this.currentPage++
        this.loadData(2)
      },
      onRefresh () {
        this.loadData(1)
      },
      itemClick (index) {
        let data = this.dataList[index]
        this.jumpWithParams('ProductDetailPage', {
          product: data.id,
        })
      },
      minibarRightButtonClick () {
        this.jumpWithParams('SearchPage', {})
      },
      wxcTabPageCurrentTabSelected (e) {
        this.currentPage = 1
        if (e.page == 0) {
          this.type = 'course'
        } else {
          this.type = 'test'
        }
        this.onRefresh()
      },
    },
  }
</script>
<style scoped>
    .search-box {
        background-color: #fafafa;
        width: 750px;
        height: 100px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .search-input {
        width: 650px;
        height: 70px;
        background-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        border-color: #F3F3F3;
        /*border:1px solid rgba(243,243,243,1);*/
        border-radius: 35px;
        padding-left: 35px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .search-text {
        color: #999999;
        font-size: 24px;
    }
    .search-icon{
        color: #00BB9A
    }
    .image {
        width: 750px;
        height: 300px;
    }

    .slider {
        width: 750px;
        height: 300px;
    }

    .frame {
        width: 750px;
        height: 300px;
        position: relative;
    }
</style>
